<template>
    <div class="home-container">
        <el-container>
            <el-header :height="vueHeaderXMain.isCollapse.value?'0px':'60px'">
                <!-- <el-button @click="vueHeaderXMain.collapseMenu()">隐藏</el-button> -->
                <div class="logoTitle">落叶</div>
            </el-header>
            <div class="fgx"></div>
            <el-container>
                <el-aside :width="vueHeaderXMain.isCollapse.value?'0px':'260px'">
                    <el-menu
                            :default-active="routerName"
                            class="el-menu-vertical-demo"
                            background-color="#021132"
                            text-color="#34c5ff"
                            active-text-color="#ffd04b"
                            :collapse="vueHeaderXMain.isCollapse.value"
                            :collapse-transition="false"
                            router
                        >
                        <el-menu-item v-for="(item, index) in vueHeaderXMain.menus.value" :key="index" :index="item.path">
                            <i class="icon element-icons el-icon-set"></i>
                            <span slot="title" style="padding-left: 5px;">{{item.name}}</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view />
                    <div style="height: 55px;"></div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
    import System from '~/utils/System';
    import VueHeaderXMain from './VueHeaderXMain'
    let vueHeaderXMain = new VueHeaderXMain()
    let routerName = System.$router.currentRoute.value.path
</script>

<style lang="less" scoped>
    .home-container {
        height: 100vh;
        z-index: -999;
    }
    :deep(.el-aside){
        background-color: #021132;
        transition: all 0.5s;
    }
    :deep(.el-header) {
        background-color: #021132;
        display: flex;
        align-items: center;
        transition: all 0.5s;
    }
    :deep(.el-main) {
        background-color: #E9EDF1;
        height: 100vh
    }

    :deep(.el-menu){
        border-right: solid 0px var(--el-menu-border-color);
        overflow: scroll;
        height: 100vh;
    }

    :deep(.el-menu-item:hover){
        background-color:rgb(21, 39, 39);
    }

    .fgx {
        display: block;
        height: 1px;
        width: 100%;
        background-color: var(--el-border-color-base);
        position: relative;
    }

    .logoTitle{
        color: #ffd04b;
        font-size: 22px;
        font-weight: bold;
        padding-left: 42px;
    }
</style>